<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>对公业务预处理系统</title>
</head>

<body>
  <div class="container">
    <img class="logo" src="./image/logo.png">
    <img class="title" src="./image/homeTitle.png" >
    <img class="bg" src="./image/home.png" alt="">
    <div class="list-wrap"></div>
  </div>
</body>

</html>
<script type="text/javascript" src="./rem.js"></script>
<script>

  const listData = [ 
    {
      type:"1",
      title:'对公开户-法人亲办',
      icon: './image/item1.png',
      
    },
    {
      type:"2",
      title:'对公开户-授权待办',
      icon: './image/item2.png',
    },
    {
      type:"3",
      title:'对公开户-集团公司',
      icon: './image/item3.png',
    },
  ]
  //渲染列表
  const renderList = (data, selector) => {
    const container = document.querySelector(selector)
    container.innerHTML = ''
    for (let i = 0; i < data.length; i++) {
      const item = document.createElement('img')
      item.src = data[i].icon
      item.className = 'item'
      item.item = data[i]
      container.appendChild(item)
    }
  }
  //处理点击事件
  const handleClick = (item) => {
    window.location.href = `./detail.html?type=${item.type}&title=${item.title}`
  }
  //绑定点击事件
  const bindClick = (selector) => {
    const container = document.querySelector(selector);
    container.onclick = (event) => {
      const e = event || window.event;
      const target = e.target || e.srcElement
      console.log(target.item);
      if (target.nodeName.toLowerCase() === 'img') {
        handleClick(target.item)
      }
    }
  }

  window.onload = () => {
    //渲染列表
    renderList(listData,'.list-wrap');
    //绑定点击事件
    bindClick('.list-wrap');
  }
</script>
<style>
  * {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    font-size: 16rem;
  }

  .container {
    position: relative;
    height: 100vh;
    width: 100vw;
    overflow-y: scroll;
    background:linear-gradient(#fdefec,#fdd8d1);
    padding: 22rem 48rem;
  }
  .logo {
    height: 32rem;
  }
  .title{
    height: 153rem;
    margin-left: 4rem;
    margin-top: 68rem;
  }
  .bg{
    width: 100%;
    margin-top: 139rem;
    /* border: 1px solid #fff; */
    z-index: 1;
  }
  .list-wrap {
    position: absolute;
    top:341rem;
    left: 60rem;
    right: 60rem;
    z-index: 2;
  }
  .item{
    display: block;
    height: 53rem;
    margin-bottom: 40rem;
  }
</style>